<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-22 20:08:09
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2022-01-01 21:53:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document_123</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      box-sizing: border-box;
    }
    .title{
      height: 60px;
      line-height: 60px;
      padding: 0 10px;
      background-color: #69f;
      font-size: 20px;
      color: #fff;
    }
    .rowUl ul {
        display: flex;
        width: 100%;
        height: 65px;
        background: #fff;
        padding: 0.373333rem 0.32rem 0;
        box-sizing: border-box;
        /* 下面是实现横向滚动的关键代码 */
        display: inline;
        float: left;
        white-space: nowrap;
        overflow-x:scroll;
        -webkit-overflow-scrolling: touch; /*解决在ios滑动不顺畅问题*/
        overflow-y: hidden;
    }
    .one {
        display: inline-block;  /*设置li为行内块级元素*/
        text-align: left;
        border-radius: 6px 6px 6px 6px;
        margin-right: 0.373333rem;
      margin-top: 5px;
      margin-right: 5px;
      padding: 5px 15px;
      background-color: #eee;
      cursor: pointer;
    }
    ul::-webkit-scrollbar {
        /* display: none; */
    }
    .on{
      background-color: #fff;
      border-bottom: none;
    }

    .selectVal{
      margin: 15px;
    }
    .box{
      width: 100%;
      padding: 10px 10px 5px;
      position: absolute;
      left: 0;
      border-bottom: 1px solid #ddd;
    }

  </style>
</head>
<body>
  <div id="app" style="border: 1px solid #ddd; width: 100vw;">
    <h3 class="title">
      3级联动
    </h3>
    <hr/>
    <div class="selectVal">选择的是：{{selectValue}}</div>
    
    <div style="position: relative;">
      <div class="box" :style="{top: offsettop+'px'}">
        <div class="one" v-for="(item,index) in arr" 
          @click.stop="faClick($event,item,index)" 
          :class="[currentIndex == index ? 'on':'']" 
          :key="item.name+index">
          {{item.name}}
        </div>
        <son-comp v-if="arr[currentIndex]" :arr="arr[currentIndex].children" :offsettop="offsettop"></son-comp>
    </div>


  </div>

  <script>
    Vue.component('son-comp',{
      props:['arr','offsettop'],
      data(){
        return{
          currentIndex: -1,
          sonoffsettop: 50,
        }
      },
      template: `
        <div class="box" :style="{top: offsettop+'px'}">
            <div class="one" v-for="(item,index) in arr" 
              @click.stop="faClick($event, item,index)" 
              :class="[currentIndex == index ? 'on':'']" 
              :key="item.name+index">
              {{item.name}}
            </div>
            <son-comp v-if="arr[currentIndex]" :arr="arr[currentIndex].children" :sonoffsettop="offsettop"></son-comp>
        </div>`,
      methods:{
        faClick(event,item,index){
          console.error('sonClick',event,item,index);
          let offset = event.target.parentNode.clientHeight;
          console.log('fa-h:',event.target.parentNode.clientHeight);
          this.sonoffsettop = offset;
          this.currentIndex = index;
          // 请求后台
          let sonArr=[
          {
              name: `${item.name}_AA市`
            },
            {
              name: `${item.name}_BB市`
            },
            {
              name: `${item.name}_CC市`
            },
            {
              name: `${item.name}_AA1市`
            },
            {
              name: `${item.name}_BB1市`
            },
            {
              name: `${item.name}_CC1市`
            }
          ]

          if(item.children){
            item.children=[]
          }else{
            this.$set(item,'children',[])
          }
          
          setTimeout(()=>{
            for (let i = 0; i < sonArr.length; i++) {
              item.children.push(sonArr[i])
            }
          },100)
        }
      }
    })
    var vm=new Vue({
      el: '#app',
      data(){
        return{
          selectValue: '',
          currentIndex: -1,
          offsettop: 50,
          arr: [
          {
              id:1,
              name: '广东省'
            },
            {
              id:2,
              name: '福建省'
            },
            {
              id:3,
              name: '海南省'
            },
            {
              id:4,
              name: '广东省1'
            },
            {
              id:5,
              name: '福建省1'
            },
            {
              id:6,
              name: '海南省1'
            }
          ]
        }
      },
      methods:{
        faClick(event,item,index){
          console.error('faClick',event,item,index);
          let offset = event.target.parentNode.clientHeight;
          console.log('fa:',event.target.parentNode.clientHeight);
          this.offsettop = offset;
          this.currentIndex = index;
          // 请求后台
          let sonArr=[
          {
              name: `${item.name}_AA市`
            },
            {
              name: `${item.name}_BB市`
            },
            {
              name: `${item.name}_CC市`
            },
            {
              name: `${item.name}_AA1市`
            },
            {
              name: `${item.name}_BB1市`
            },
            {
              name: `${item.name}_CC1市`
            }
          ]

          if(item.children){
            item.children=[]
          }else{
            this.$set(item,'children',[])
          }
          
          setTimeout(()=>{
            for (let i = 0; i < sonArr.length; i++) {
              item.children.push(sonArr[i])
            }
          },100)
        }
      }
      
    })
  </script>

</body>
</html>